<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>

</head>
<style>
    .viewer
    {
        width: 100%;
        height: 500px;
        border: 1px solid white;
        position: relative;
    }

    .wrapper
    {
        overflow: hidden;
    }
</style>
<body class="gray-bg">

    <div class="row" style="width: 100%;height: 100%;">
        <div id="viewer2" class="viewer" style="width: 100%;"></div>
    </div>

    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript">
        jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
    </script>
    <script type="text/javascript" th:src="@{/js/king/iviewer/jqueryui.js}"></script>
    <script type="text/javascript" th:src="@{/js/king/iviewer/jquery.mousewheel.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/king/iviewer/jquery.iviewer.js}"></script>

    <link th:href="@{/js/king/iviewer/jquery.iviewer.css}" rel="stylesheet"/>

</body>

<script type="text/javascript">
    var $ = jQuery;
    $(document).ready(function(){
        var iv1 = $("#viewer").iviewer({
            src: "test_image.jpg",
            update_on_resize: false,
            zoom_animation: false,
            mousewheel: false,
            onMouseMove: function(ev, coords) { },
            onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
            onDrag: function(ev, coords) { }
        });

        $("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
        $("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
        $("#fit").click(function(){ iv1.iviewer('fit'); });
        $("#orig").click(function(){ iv1.iviewer('set_zoom', 100); });
        $("#update").click(function(){ iv1.iviewer('update_container_info'); });

        var iv2 = $("#viewer2").iviewer({src: "[[${imgurl}]]"});

        $("#chimg").click(function()
        {
            iv2.iviewer('loadImage', "test_image.jpg");
            return false;
        });

        var fill = false;
        $("#fill").click(function()
        {
            fill = !fill;
            iv2.iviewer('fill_container', fill);
            return false;
        });
    });
</script>
</html>